<template>
  <div>
    <div class="flex mb-3">
      <span>{{ title }}</span>
      <n-button quaternary class="ml-auto">查看更多</n-button>
    </div>
    <n-grid x-gap="12" :cols="4" class="mb-6">
      <n-gi v-for="(item, index) in pData" :key="index">
        <CourseList :item="item" />
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup>
import { NButton, NGrid, NGi } from "naive-ui";

const props = defineProps({
  data: Array,
  title: {
    type: String,
    default: "展示区标题",
  },
  type: {
    type: String,
    default: "course",
  },
});

const pData = ref(props.data || []);
if (props.type === "group") {
  const { data } = await useGroupDataApi({
    page: 1,
    usable: 1,
    limit: 8,
  });
  pData.value = (data.value?.rows).reverse().slice(0, 4) ?? [];
  // console.log(pData.value, "dd");
}
</script>
